<template>
	<view class="updateContainer" :style="{height: screenHeight+'px', width: screenWidth+'px'}">
		<view class="header" :style="{height: headerHeight*0.8+'px', width: screenWidth+'px'}">
			<view class="back" @click="back" :style="{width: screenWidth/3 + 'px'}">
				<u-icon name="arrow-left" :size="50"></u-icon>
			</view>
			<view class="pageName" :style="{width: screenWidth/3 + 'px'}">
				更新队伍信息
			</view>
			<view class="update" @click="update" :style="{width: screenWidth/3 + 'px'}" style="display: flex;justify-content: end; margin-right: 30upx;">
				更新
			</view>
		</view>
		
		<view class="main">
			<view class="memberBox" :style="{width: screenWidth*0.6+'px', height: screenHeight*0.04+'px'}">
				<view class="member" v-for="(index) in temporaryInfo.scale" :key="index">
					<view class="head">
						<view class="avatar">
							<view class="" v-if="index+1 > memberSize">
								<u-avatar
										icon="plus"
										fontSize="30"
										size="70"
								></u-avatar>
							</view>
							<view class="joinedMember" v-else @click="seeHome(temporaryInfo.member[index].id)">
								<u-avatar
										:src="temporaryInfo.member[index].avatar"
										fontSize="30"
										size="70"
								></u-avatar>
								<view class="nickname">
									{{temporaryInfo.member[index].nickname}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="title" >
				<input type="text" class="titleInput" placeholder="请输入队名" v-model="temporaryInfo.title">
			</view>
			<view class="setSchool" @click="schoolPickerShow = true">
				<view class="schoolInput">
					{{chosenSchool.id==-1 ? '请选择学校' : chosenSchool.name}}
				</view>
				<!-- <input class="schoolInput" type="text" placeholder="请选择学校" v-model="temporaryInfo.schoolId"> -->
			</view>
			<view class="teamTags" @click="openTags">
				<view>
					队伍标签
				</view>
				<view style="display: flex; flex-direction: row;align-items: center;flex-wrap: wrap;margin-top: 15upx;">
					<uni-tag v-if="myTags.size != 0" class="Tags" v-for="(item, index) in myTags" :key="index" :text="item" :inverted="true" type="warning" size="mini"></uni-tag>
				</view>
			</view>
			
			<view class="description">
					<u--textarea v-model="temporaryInfo.description" placeholder="队伍描述" border="none" :height="600" :maxlength="400"></u--textarea>
				
				<view class="upload" style="margin-top: 20upx;margin-left: 20upx;">
					<view class="coverBox" @click="uploadFile">
						<view>
							<u-icon  v-if="temporaryInfo.cover == ''" name="photo" :size="60" color="#b1b7b8"></u-icon>
							<view v-else>
								<image class="cover" :src="temporaryInfo.cover" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					</view>
				</view>
				
				<view class="limition">
					<view class="scale">
						<table>
							<tr>
								<td>招募人数: &nbsp;</td>
								<td><input v-model="scale_T" type="number" placeholder="0~7" style="height: 50upx; width: 60upx; border-bottom: 2upx solid rgba(194, 194, 194, 1.0);margin-left: 20upx;display: flex;justify-content: center;"></td>
							</tr>
						</table>
					</view>
					<view class="deadline">
						<table>
							<tr @click="chooseDeadline">
								<td>截止时间: &nbsp;</td>
								<td style="display: block; width: 200upx;height: 50upx; border-bottom: 2upx solid rgba(194, 194, 194, 1.0); margin-left: 20upx;">{{temporaryInfo.deadline}}</td>
							</tr>
						</table>
					</view>
				</view>
			</view>
		
		<u-popup :round="30" :duration="200"
			:show="popupControl.tags" mode="center"  
			@close="popupControl.tags = false" :closeOnClickOverlay="true" @cancel="popupControl.tags = false">
			
			<view class="baseCardStyle changeTags" style="height: 1000upx; width: 600upx;">
				<view class="guide">
					修改标签
				</view>
					
				<view class="tagsArea">
					<view class="myTags">   
						<view class="my">
							我的标签
						</view>
						<view class="showMyTags">
							<u-tag class="tags" v-for="(item, index) in myTags" :key="index" 
								   :text="item" :plain="!item" type="success" :name="index"
								   @click="cancelMyTag(item)">
							</u-tag>
						</view>
					</view>
					
					<view class="allTags">
						<view class="all">
							所有标签
						</view>
						<view class="showAllTags">
							<u-tag class="tags" v-for="(item, index) in systemTagList" :key="index"
								   :text="item.tagName" :plain="!item.isChoose" type="success" :name="index"
								   @click="chooseTag(item)">
							</u-tag>
						</view>
					</view>
				</view>	
					
					
				<view class="control">
					<view class="cancel" @click="cancelTags()">取消</view>
					<view class="update" @click="updateTags()">保存并退出</view>
				</view>
			</view>
		</u-popup>
		 <u-picker :show="schoolPickerShow" ref="uPicker" :columns="schoolList" @confirm="schoolComfirm" @change="changeHandler" :closeOnClickOverlay="true" @close="schoolPickerShow = false"></u-picker>
		<u-datetime-picker
				class="timePicker"
				:show="popupControl.deadline"
				mode="date"
				@confirm="chooseTimeOver"
				@cancel="chooseTimeCancel"
				:minDate="minDate"
				:maxDate="maxDate"
				:formatter="formatter"
		></u-datetime-picker>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				schoolPickerShow: false,
				statusBarHeight: 0,
				screenHeight: 0,
				screenWidth: 0,
				headerHeight:0,
				scale_T: 0,
				typeId:'',
				memberSize:0,
				myTags:new Set(),
				timeUtil: new Date(),
				popupControl:{
					tags: false,
					deadline: false
				},
				systemTagList:[
					{
						id: 0,
						tagName: '计算机设计大赛',
						isChoose: false,
					},
					{
						id: 1,
						tagName: '互联网+',
						isChoose: false
					},
					{
						id: 2,
						tagName: '挑战杯',
						isChoose: false
					},
					{
						id: 3,
						tagName: '软件杯',
						isChoose: false
					}
				],
				newTeamInfo: {
					title: '',
					description: '',
					scale: 0,
					typeId: '',
					schoolId: '',
					deadline: '',
					tagList:[],
					cover: '',
					member:[],
				},
				temporaryInfo: {
					title: '',
					description: '',
					scale: 0,
					typeId: '',
					schoolId: '',
					deadline: '',
					tagList:[],
					cover:'',
					member:[],
				},
				chosenSchool:{
					id: -1,
					name: ''
				},
				minDate:0,
				maxDate: 0,
				schoolList:[
					['四川'],
					['油专','恐龙'],
				],
				schoolData:[
					['油专','恐龙'],
					// ['四川大学','电子科技大学','西南交通大学','西南财经大学','西南石油大学','成都理工大学','四川农业大学'],
					// ['浙江大学'],
					// ['复旦大学','同济大学','上海海洋大学','上海科技大学']
				]
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			seeHome(id){
				if(id === undefined){return;}
				uni.request({
					method:'GET',
					url:`http://162.14.102.246:8090/user/front/homePage/${id}`,
					header:{
						xdzn_token: this.$store.state.loginUser.token
						
					}
				}).then(res => {
					//console.log('获取数据',res.data.data.home)
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/otherUserHome?info="+encodeURIComponent(JSON.stringify(res.data.data.home))
					})
				})
			},
			update(){
				//tagId的问题
				this.temporaryInfo.schoolId = this.chosenSchool.id
				if(this.chosenSchool.name === this.$store.state.loginUser.userBaseInfo.ownInfo.school || this.chosenSchool.name === '油专'){
					this.temporaryInfo.typeId = '1' //1 是校内
				}else{
					this.temporaryInfo.typeId = '2' //2 是校外
				}
				this.newTeamInfo = this.temporaryInfo
				this.newTeamInfo.scale
				//console.log('信息删除前',this.newTeamInfo)
				//this.newTeamInfo['gmtModified'] = this.timeUtil.toLocaleDateString().replace(/\//g, '-')
				//this.newTeamInfo['updateBy'] = this.$store.state.loginUser.userBaseInfo.id
				this.newTeamInfo['isDeleted'] = 0
				delete this.newTeamInfo.taglist
				delete this.newTeamInfo.type
				delete this.newTeamInfo.member
				delete this.newTeamInfo.school
				delete this.newTeamInfo.gmtModified
				//delete this.newTeamInfo.gmtCreate
				delete this.newTeamInfo.createBy
				//delete this.newTeamInfo.updateBy
				this.newTeamInfo.scale = Number(this.scale_T)
				this.newTeamInfo.schoolId = this.newTeamInfo.schoolId.toString()
				console.log('信息删除后',this.newTeamInfo)
				//需要修改
				uni.request({
					url:'http://162.14.102.246:8090/team/front/recruitment',
					method:'PUT',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					},
					data:this.newTeamInfo
				}).then(res => {
					console.log(res)
					if(res.data.code == 200){
						//console.log(this.$store.state.loginUser.team.find(obj => obj.id==this.temporaryInfo.id))
						let flag = this.$store.state.loginUser.team.indexOf(this.$store.state.loginUser.team.find(obj => obj.id==this.temporaryInfo.id))
						this.$store.state.loginUser.team.splice(flag, 1)
						this.$store.state.loginUser.team.unshift(this.temporaryInfo)
						console.log(this.$store.state.loginUser.team)
						//this.$store.state.loginUser.team.find(obj => obj.id==this.temporaryInfo.id) = this.temporaryInfo
						uni.showToast({
							icon:'success',
							title:'信息已更新',
							duration:1200
						})
						//调用上一个页面的方法
						let pages = getCurrentPages()
						let pre = pages[pages.length-2]
						//console.log(pre)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1,
								success: () => {
									//发布组队
									this.$forceUpdate()
									pre.$children[0].$children[1].update()
								}
							})
						}, 1500)
					}
				})
			},
			cancelMyTag(tagName){
				this.systemTagList.find(obj => obj.tagName == tagName).isChoose = false
				this.myTags.delete(tagName)
				//this.systemTagList.find(object => object.name == tag.name).isChoose == tag.isChoose
			},
			schoolComfirm(e){
				let provinceId = this.schoolList[0].indexOf(e.value[0])
				let schoolId = this.schoolData[provinceId].indexOf(e.value[1])+1
				this.chosenSchool.id = schoolId
				this.chosenSchool.name = e.value[1]
				this.schoolPickerShow = false
			},
			changeHandler(e){
				const {
					columnIndex,
					value,
					values,
					index,
					picker
				} = e
				if(columnIndex === 0){ //第一列
					picker.setColumnValues(1, this.schoolData[index])
				}
			},
			chooseTag(tag){
				tag.isChoose = !tag.isChoose
				if(tag.isChoose == true){
					this.myTags.add(this.systemTagList.find(object => object.tagName == tag.tagName).tagName)
				}else{
					this.myTags.delete(tag.tagName)
				}
				this.systemTagList.find(object => object.name == tag.name).isChoose == tag.isChoose
				//console.log(this.myTags)
			},
			chooseTimeCancel(){
				this.popupControl.deadline = false
			},
			chooseTimeOver(e){
				let t = new Date(e.value)
				let time = t.getFullYear()+'-'+(t.getMonth()+1 < 10 ? '0'+(t.getMonth()+1) : t.getMonth()+1) + '-' +t.getDate()
				this.temporaryInfo.deadline = time
				//console.log(this.temporaryInfo.deadline)
				this.popupControl.deadline = false
			},
			openTags(){
				console.log(this.myTags)
				//待优化
				this.systemTagList.forEach((item) => {
					this.myTags.forEach((s) => {
						if(item.tagName == s){
							item.isChoose = true
						}
					})
				})
				this.popupControl.tags = true
			},
			cancelTags(){
				this.temporaryInfo.tagList = []
				this.popupControl.tags = false
			},
			updateTags(){
				let newTags = []
				this.myTags.forEach((item) => {
					//newTags.push(this.systemTagList.find(obj => obj.tagName == item).id)
					newTags.push(item)
				})
				this.temporaryInfo.tagList = newTags
				//console.log(this.temporaryInfo.tagList)
				this.popupControl.tags = false
			},
			uploadFile(){
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					sourceType:['album'],
					success:(img) => {
						//console.log(img.tempFilePaths[0].toString())
						console.log(img.tempFiles[0])
						let fd = new FormData()
						fd.append('file',img.tempFiles[0])
						this.$axios.post('http://162.14.102.246:8090/user/file/upload',fd,{
							header:{
								xdzn_token:this.$store.state.loginUser.token,
								'Content-Type':'multipart/form-data'
							}
						}).then(res => {
							//console.log(res.data)
							if(res.data.code == 200){
								this.temporaryInfo.cover = res.data.data.url
							}else{
								uni.showToast({
									icon:'error',
									title:'上传失败',
									duration:1200
								})
							}
						})
					}
				})
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			chooseDeadline(){
				this.minDate = this.timeUtil.getTime()
				this.maxDate = this.minDate+31536000000
				this.popupControl.deadline = true
			}
		},
		mounted(){
		},
		onLoad(options) {
			//console.log(options)
			this.statusBarHeight = options.statusBarHeight
			let data = JSON.parse(decodeURIComponent(options.teamInfo))
			data.deadline = data.deadline.substring(0,10)
			this.temporaryInfo = data
			this.chosenSchool.name = data.school
			this.chosenSchool.id = 1
			this.scale_T = this.temporaryInfo.scale
			this.memberSize = this.temporaryInfo.member.length
			//改tag的问题，接口拿不到tag，还有上传的tagList的结构是？
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight
					this.screenWidth = res.screenWidth
					this.headerHeight = this.screenHeight*0.11 + res.statusBarHeight
				}
			})
		}
	}
</script>

<style scoped>
	.updateContainer{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 1rem;
		font-weight: 500;
	}
	.back{
		margin-left: 30upx;
	}
	.update{
		color: dodgerblue;
	}
	.baseCardStyle{
		position: relative;
		width: 500upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: white;
	}
	.changeTags{
		display: flex;
		flex-direction: column;
		/* align-items: flex-start; */
		padding-left: 30upx;
		padding-right: 30upx;
	}
	.guide{
		position: absolute;
		top: 10upx;
		font-size: 1.3rem;
		font-weight: bold;
		color: black;
	}
	.tagsArea{
		position: relative;
		top: 90upx;
	}
	.my, .all{
		position: relative;
		width: 600upx;
		border-bottom: 2upx solid rgba(189, 189, 189, 0.3);
	}
	.myTags, .allTags{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.showMyTags, .showAllTags{
		padding-top: 20upx;
		width: 95%;
		margin-left: calc(5%);
		height: 350upx;
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	::v-deep .tags{
		position: relative;
		/* margin-left: 20upx; */
		margin-right: 20upx;
		margin-bottom: 20upx;
	}
	.control{
		position: absolute;
		bottom: 15upx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.cancel, .update{
		width: 50%;
		height: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		letter-spacing: 0.2rem;
		font-weight: bold;
	}
	.cancel{
		color: gray;
	}
	.update{
		color: deepskyblue;
		border-left: 2upx solid rgba(220,220,220,0.430);
	}
	.title{
		margin-top: 50upx;
		height: 50upx;
		width: 96vw;
		padding-bottom: 15upx;
		border-bottom: 2upx solid rgba(220,220,220,0.430);
	}
	.titleInput{
		width: 100%;
		height: 50upx;
		font-size: 1rem;
		font-weight: bold;
	}
	.setSchool{
		margin-top: 40upx;
		height: 50upx;
		width: 96vw;
		padding-bottom: 15upx;
		border-bottom: 2upx solid rgba(220,220,220,0.430);
	}
	.schoolInput{
		width: 100%;
		height: 50upx;
		font-size: 0.9rem;
		font-weight: bold;
		color: grey;
	}
	.teamTags{
		margin-top: 40upx;
		min-height: 100upx;
		width: 96vw;
		padding-bottom: 15upx;
		border-bottom: 2upx solid rgba(220,220,220,0.430);
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		font-size: 0.9rem;
		font-weight: bold;
	}
	::v-deep .Tags{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50upx;
		border-radius: 2rpx;
		margin-right: 4rpx;
	}
	.description{
		display: flex;
		margin-top: 40upx;
		width: 96vw;
		padding-bottom: 15upx;
		flex-direction: column;
		border-bottom: 2upx solid rgba(220,220,220,0.430);
	}
	.coverBox{
		position: relative;
		width: 140upx;
		height: 140upx;
		border: 3upx solid ghostwhite;
		box-shadow: 2upx 4upx 10upx rgba(220,220,220,0.240);
		overflow: hidden;
		background-color: rgba(220,220,220,0.440);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cover{
		width: 140upx;
		height: 140upx;
		background-size: cover;
	}
	.limition{
		margin-top: 30upx;
		color: gray;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.memberBox{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin: 0 auto;
	}
	.joinedMember{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 0.4rem;
	}
</style>